import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export class Echarts extends Vue {
    // 柱状图获取json
    public gethistogramjson(titiletext: any, legenddata: any, xAxisdata: any, seriesjson: any) {
        let series: any = []
        seriesjson.forEach((item: any) => {
            series.push({
                name: item.name,
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: item.color
                    }
                },
                data: item.data
            })
        });

        let histogramjson: any = {
            title: {
                text: titiletext,
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legenddata
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: xAxisdata,
                    axisLabel: {
                        interval: 0,
                        rotate: -15
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false
                    }
                }
            ],
            series
        }
        return histogramjson
    }
    // 饼状图获取json
    public getpiechartjson(titiletext: any, legenddata: any, seriesjson: any) {
        let series: any = []
        seriesjson.forEach((item: any) => {
            series.push({
                name: item.name,
                type: 'pie',
                radius: ['50%', '70%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color(params: any) {
                            let colorList = item.color
                            return colorList[params.dataIndex]
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    }
                },
                data: item.data
            })
        });
        let piechartjson: any = {
            title: {
                show: true,
                text: titiletext,
                x: 'center'
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: legenddata
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'center',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            tooltip: {
                show: true,
                trigger: 'item',
                showDelay: 20,
                hideDelay: 20,
                backgroundColor: '#272D3A',
                textStyle: {
                    fontSize: '16px',
                    color: '#FFFEFE'
                },
                formatter: '{a} <br/>{b} : {c}分钟 ({d}%)'
            },
            series
        }
        return piechartjson
    }
    // 获取曲线图json
    public getdiagramjson(titiletext: any, legenddata: any, xAxisdata: any, seriesjson: any) {
        let series: any = []
        seriesjson.forEach((item: any) => {
            series.push({
                name: item.name,
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            color: item.color
                        },
                        lineStyle: {
                            color: item.color
                        }
                    }
                },
                data: item.data
            })
        });
        let diagramjson = {
            title: {
                text: titiletext,
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legenddata
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisdata
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false
                    }
                }
            ],
            series
        }
        return diagramjson
    }
    // 获取地图json
    public getmapjson(titiletext: any, splitListdata: any, colordata: any, seriesdata: any) {
        let mapjson = {
            backgroundColor: '#FFFFFF',
            title: {
                text: titiletext,
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                show: true,
                x: 'left',
                y: 'center',
                splitList: splitListdata,
                color: colordata
            },
            series: [
                {
                    name: '数据',
                    type: 'map',
                    mapType: 'china',

                    roam: true,
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: 'blue'
                            }
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#800080'
                            }
                        }
                    },
                    aspectScale: 0.75,
                    zoom: 1.2,
                    itemStyle: {
                        normal: {
                            borderWidth: 0.5,
                            borderColor: '#313537',
                            areaColor: '#313537'
                        },
                        emphasis: {
                            borderWidth: 0.5,
                            borderColor: '#4b0082',
                            areaColor: '#00B692'
                        }
                    },
                    data: seriesdata
                }
            ]
        }
        return mapjson
    }

}
